<template>
	<view class="container">
		<!-- <u-navbar back-text="返回" back-icon-color="#ffffff" :back-text-style="textObj" immersive :border-bottom="false"
		 :background="background"></u-navbar> -->
		<view class="loading" v-if="loading">
			<u-loading color="color"></u-loading>
		</view>
		<view class="box" :style="{opacity:opacity}">
			<canvas canvas-id="qrcode" :style="{
			'height':qrcodeSize + 'px'
		}" class="code-canvas" @click="previewCodeImage" />

			<u-image :src="zpImgUrl+'share_bg.jpg'" width="100%" mode="widthFix" @load="load"></u-image>
			
		
		</view>
		<u-image :src="zpImgUrl+'yaoqing.png'" width="388rpx" height="88rpx" mode="widthFix" class="yq_btn"></u-image>
	</view>
</template>

<script>
import {appletImgUrl,zpImgUrl} from "@/common/config.js"
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		onShareAppMessage() {
			return {
				path: '/pages/webView/webView?promoter=' + this.promoter,
				title: this.shareContent,
				imageUrl: this.imageURL + 'USER/ba14f329-48a6-4f38-a84a-4b7a3092c7f6.png'
			}
		},
		onShareTimeline() {
			return {
				path: '/pages/webView/webView?promoter=' + this.promoter,
				title: this.shareContent,
				imageUrl: this.imageURL + 'USER/ba14f329-48a6-4f38-a84a-4b7a3092c7f6.png'
			}
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				zpImgUrl:zpImgUrl,
				totalPromoteCount: 0,
				opacity: 0,
				imageURL: this.imageURL,
				loading: true,
				textObj: {
					color: '#ffffff'
				},
				background: {
					backgroundColor: 'transparent'
				},
				codeImg: this.imageURL + 'USER/5a7ec1ff-2d57-446a-ad37-ae134a8ca105.png',
				qrcodeSize: uni.upx2px(360),
				qrcodeSrc: '',
				dealNumber: 0,
				rule: ''
			};
		},
		onLoad() {
			this.$u.post('user/listDirectUser').then(res => {
				this.totalPromoteCount = res.totalPromoteCount
			})
			// this.$u.get('groupbuyinglist/getRebateOrderCount').then(res => {
			// 	this.dealNumber = res.alreadyProfitOrderCount
			// })
			// this.$u.get('groupbuyinglist/getGroupRoleDesc').then(res => {
			// 	res = res.split(';')
				
			// 	this.rule = Array.from(new Set(res))
			// })
			this.$u.get('user/userShare/1').then(res => {
				// uni.setStorageSync('registerURL', res.url + '&openid=' + uni.getStorageSync('openId'))
				var index = res.url.lastIndexOf("\=");
				let promoter = res.url
				promoter = promoter.substring(index + 1, res.url.length);
				this.promoter = promoter
				this.shareContent = res.content
				// d2d5f549b5d81cecea932e156f29dbe0
				uQRCode.make({
					canvasId: 'qrcode',
					text: res.url,
					size: this.qrcodeSize,
					margin: 10
				}).then(res => {
					this.qrcodeSrc = res
				}).finally(() => {
					uni.hideLoading()
				})
			})
		},
		methods: {
			previewCodeImage() {
				uni.previewImage({
					urls: [this.qrcodeSrc]
				})
			},
			load() {
				this.loading = false
				this.opacity = 1
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		position: absolute;
		top: 38.6%;
		left: 50%;
		transform: translateX(-50%);
		background: none;

		&::after {
			border: none;
		}

		z-index: 2;
	}

	.box {
		transition: all .3s;
	}

	page {
		background-color: #ff7a2a;
	}

	.footer-content {
		position: absolute;
		top: 44%;
		left: 0;
		width: 100%;
		z-index: 1;

		.rule {
			position: relative;

			.text {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				padding: 0 70rpx;
				padding-top: 50rpx;

				text {
					margin-top: 15rpx;
					font-size: 28rpx;
					display: inline-block;
					font-size: 27rpx;
					&:first-child {
						margin-top: 0;
					}
				}
			}
		}

		.record {
			position: relative;

			.record-box {
				position: absolute;
				padding-top: 50rpx;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>view {
					flex: 1;
					text-align: center;
					font-size: 30rpx;

					&:last-child {
						border-left: 1rpx solid #FEBD7F;
					}

					>view {
						display: flex;
						align-items: center;
						justify-content: center;

						.number {
							font-size: 80rpx;
							font-weight: bold;
							color: #FF8B1A;
						}
					}
				}
			}
		}
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		position: relative;
	}

	.code-canvas {
		position: absolute;
		// top: 27.6%;
		top: 45%;
		left: 50%;
		z-index: 1000;
		transform: translateX(-50%);
		// width: 50%;
		width: 360rpx;
		// height: 40%;
	}
	.ad-text-box{
		position: absolute;
		top:calc(100vh - 45vh - 360rpx);
		text-align: center;
		.ad-text-one{
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
		}
		.ad-text-two{
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	.yq_btn{
		position: absolute;
		bottom: 140rpx;
		left:180rpx;
	}
</style>
